<template>
  <div>
    <div class="div" v-for="(item,index) in list" :key="index" @click.stop="searchHot(item)">
      <van-icon class="right" name="search" size="18" />
      <span v-html="replaceItem(item)"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Hot',
  props: ['list', 'value'],
  methods: {
    searchHot (item) {
      this.$emit('searchHot', item)
    },
    // 高亮
    replaceItem (test) {
      const reg = new RegExp(this.value, 'gi')
      return test.replace(reg, `<span style="color: red">${this.value}</span>`)
    }
  }
}
</script>

<style lang="less" scoped>
.div {
  padding: 0 20px;
  display: flex;
  align-items: center;
}
span {
  margin: 15px 0 15px 15px;
}
/deep/span {
  font-size: 32px;
}
</style>
